<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-logo-menu"></i>商店</el-breadcrumb-item>
                <el-breadcrumb-item>二手入驻</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="crumbs clearfix">
            <div class="left filter-item">
                <!-- 学校： -->
                <el-select clearable v-model="listQuery.param.schoolId" placeholder="请选择学校"
                  :disabled="rid!=1">
                    <el-option
                    v-for="item in schoolOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="left filter-item">
                <!-- 店铺名： -->
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="店铺名" v-model="listQuery.param.shopName">
                </el-input>
            </div>
            <div class="left filter-item">
              <el-date-picker
                style="width: 200px;display: inline-block;"
                v-model="listQuery.param.startTime"
                type="date"
                placeholder="选择开始时间">
              </el-date-picker>
            </div>
            <div class="left filter-item">
              <el-date-picker
                style="width: 200px;display: inline-block;"
                v-model="listQuery.param.endTime"
                type="date"
                placeholder="选择结束时间">
              </el-date-picker>
            </div>
            <div class="left filter-item">
                <!-- 责任人姓名： -->
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="责任人姓名" v-model="listQuery.param.username">
                </el-input>
            </div>
            <div class="left filter-item">
                <!-- 责任人手机： -->
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="责任人手机" v-model="listQuery.param.phone">
                </el-input>
            </div>
            <el-button class="left filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
            <!-- <el-button class="left filter-item" style="margin-left: 30px;" type="primary" icon="plus" @click="handleAddShop">添加二手</el-button> -->
        </div>
        <div style="float: right">
           <!--  <el-button @click="add" type="primary"><i class="el-logo-plus"></i> 添加</el-button> -->
            <!-- <el-button @click="del()" type="primary" logo="delete">删除</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="auto"  min-width="40spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="shopName" label="店铺名" min-width="160spx" :disabled="true">
            </el-table-column>
            <!-- <el-table-column label="店铺类型" min-width="160spx" :disabled="true">
                <template scope="scope"> 
                    <span>{{[scope.row.shopType,shopTypeOption] | shopTypeFilter}}</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="schoolName" label="学校名" min-width="180spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="username" label="真实姓名" min-width="160spx" :disabled="true">
            </el-table-column>
            <!-- <el-table-column prop="email" label="邮箱" min-width="160spx" :disabled="true">
            </el-table-column> -->
            <el-table-column  prop="phone" label="电话" min-width="130spx" :disabled="true">
            </el-table-column>
            <!-- <el-table-column prop="cardId" label="身份证号" min-width="180spx" :disabled="true">
            </el-table-column> -->
            <!-- <el-table-column prop="cardFrontImg" label="身份证正面" min-width="160spx" :disabled="true">
                <template scope="scope">
                    <img :src="scope.row.cardFrontImg" width="100" height="100" >
                </template>
            </el-table-column>
            <el-table-column prop="cardBackImg" label="身份证反面" min-width="160spx" :disabled="true">
                <template scope="scope">
                    <img :src="scope.row.cardBackImg" width="100" height="100">
                </template>
            </el-table-column> -->
            <el-table-column label="营业状态" align='center' min-width="160spx" >
            <template scope="scope">
                <!-- <span>{{scope.row.status}}</span> -->
                <span v-if="scope.row.status == 0">正常营业</span>
                <span v-if="scope.row.status == 1">暂停营业</span>
                <!-- <span v-if="scope.row.status == 2">未通过</span> -->
            </template>
            </el-table-column>
            <el-table-column label="操作" align='center' min-width="280spx">
                <template scope="scope">
                    <el-button size="small" type="success"
                            @click="handleDetail(scope.row,1)">详情</el-button>
                    <el-button size="small" type="warning"
                            @click="handleModify(scope.row,2)">修改</el-button>
                    <el-button v-if="scope.row.status==0" size="small" type="danger"
                            @click="handleClose(scope.row)">关店</el-button>
                    <el-button v-else size="small" type="success"
                            @click="handleClose(scope.row)">开启</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="listQuery.pageNumber"
               :page-sizes="[10, 20, 50]"
               :page-size="listQuery.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </div>

        <!-- 新增店铺 -->
        <el-dialog :title="dailogTitle" :visible.sync="editDialogFormVisible">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                         <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm.id" placeholder="编号"  :disabled="true"></el-input>
                        </el-form-item>
                         <el-form-item prop="realName"  label="店铺名">
                           <el-input v-model="entityForm.realName" placeholder="店铺名" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item prop="phone"  label="电话">
                           <el-input v-model="entityForm.phone" placeholder="电话" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item prop="areaCode"  label="省市编码">
                           <el-input v-model="entityForm.areaCode" placeholder="省市编码" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item prop="address"  label="地址">
                           <el-input v-model="entityForm.address" placeholder="地址" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item prop="cardNum" label="身份证号码">
                           <el-input v-model="entityForm.cardNum" placeholder="身份证号码" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item prop="cardFrontImg" label="身份证正面">
                           <img :src="entityForm.cardFrontImg" width="100" height="100" :disabled="true">
                        </el-form-item>
                        <el-form-item prop="cardBackImg" label="身份证反面">
                           <img :src="entityForm.cardBackImg" width="100" height="100" :disabled="true">
                        </el-form-item>
                        <el-form-item  label="身份">
                           <el-input v-model= "entityForm.address" placeholder="电话" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item prop="verifyRemark" label="备注" v-if="entityForm.verifyRemark != ''&&entityForm.verifyRemark != null">
                           <el-input type="textarea" v-model="entityForm.verifyRemark" placeholder="备注" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible=false">取消</el-button>
                <el-button  type="primary" v-if="entityForm.verifyStatus == 0||entityForm.verifyStatus == -1" @click="setStatus(1,entityForm.id)">通过</el-button>
                <el-button  type="primary" v-if="entityForm.verifyStatus == 0||entityForm.verifyStatus == 1" @click="setStatus(-1,entityForm.id)">不通过</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="dailogTitle" :visible.sync="dialogVisible">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                         <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm.id" placeholder="编号"  :disabled="true"></el-input>
                        </el-form-item>
                         <el-form-item prop="verifyRemark" label="审核">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                v-for="item in option2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                         <el-form-item prop="verifyRemark" label="手续费%">
                           <el-input type="" v-model="entityForm.verifyRemark" placeholder="备注"></el-input>
                        </el-form-item>
                        <el-form-item prop="verifyRemark" label="备注">
                           <el-input type="textarea" v-model="entityForm.verifyRemark" placeholder="备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button  type="primary" @click="update(entityForm.id)">回复</el-button>
            </div>
        </el-dialog>

        <!--店铺详情-->
        <el-dialog title="店铺详情" :visible.sync="detailDialogFormVisible">
            <el-form>
                <!-- <el-form-item label="首页图片" class="input_logo">
                    <img width=300 height=200 :src="detailForm.imgs" />
                </el-form-item> -->
                <el-form-item label="店铺名称" class="input_edit">
                    <el-input v-model="detailForm.shopName" :readonly='editFlag==1?true:false'></el-input>
                </el-form-item>
                <el-form-item label="所属学校" class="input_edit">
                    <el-select :disabled='true' clearable v-model="detailForm.schoolId">
                    <el-option
                    v-for="item in schoolOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <div style="clear:both;"></div>
                </el-form-item>
                <el-form-item label="创建时间" class="input_edit">
                    <el-input :readonly='true' v-model="detailForm.createDateName"></el-input>
                </el-form-item>
                <div style="clear:both;"></div>
                <!-- <div style="clear:both;"></div> -->
                <el-form-item label="责任人身份证" class="input_edit">
                    <el-input  :readonly='true' v-model="detailForm.cardId"></el-input>
                </el-form-item>
                <el-form-item label="责任人姓名" class="input_edit">
                    <el-input :readonly='editFlag==1?true:false' v-model="detailForm.username"></el-input>
                </el-form-item>
                <el-form-item label="责任人电话" class="input_edit">
                    <el-input :readonly='true' v-model="detailForm.phone"></el-input>
                </el-form-item>
                <el-form-item  label="是否禁用" class="input_edit">
                    <el-select :disabled='editFlag==1?true:false' v-model="detailForm.status" placeholder="">
                        <el-option key="0" label="关闭" value="0"></el-option>
                        <el-option key="1" label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item  label="关注数" class="input_edit">
                    <el-input :readonly='true' v-model="detailForm.shopCollect"></el-input>
                </el-form-item> -->
                <el-form-item  label="店铺等级" class="input_edit">
                    <el-input :readonly='true' v-model="detailForm.shopGrade"></el-input>
                </el-form-item>
                <!-- <el-form-item label="身份证正面" class="input_card">
                    <img width=100%  :src="detailForm.cardFace" />
                </el-form-item>
                <el-form-item label="身份证反面" class="input_card">
                    <img width=100% :src="detailForm.cardBack" />
                </el-form-item> -->
                <div style="clear:both;"></div>
            </el-form>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="editFlag==1" type="primary" @click="detailDialogFormVisible = false">确 定</el-button>
                <el-button v-if="editFlag==2" type="primary" @click="comfirmModify">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        data() {
            return {
                rid: null,
                schoolValue: '',
                shopValue: '',
                shopNameValue: '',
                schoolOptions: [],
                shopTypeOption: [],
                shopNameOptions: [],
                options: [],
                option2: [],
                value: '',
                editFlag: null,
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        schoolId: '',
                        shopType: '',
                        shopName: '',
                        phone: '',
                        startTime: null,
                        endTime: null,
                    },
                },
                tableData: [
                    {
                        id:'',
                        realName: '15623885110',
                        phone: '123456',
                        areaCode:'',
                        address:'',
                        cardNum:'',
                        cardFrontImg:'',
                        cardBackImg:'',
                        verifyStatus:'',
                        verifyUserId:'',    //审核
                        verifyDate:'',        //审核日期
                        verifyRemark:''    //审核备注
                    }
                ],
                total: 1000,
                // propretis for search
                param: {

                },
                searchData:{},
                // propretis for dailog
                dailogTitle: '',
                editDialogFormVisible: false,
                addDialogFormVisible: false,
                detailDialogFormVisible: false,
                // record for input
                detailForm: {

                },
                entityForm: {
                    id:'',
                    realName: '15623885110',
                    phone: '123456',
                    areaCode:'',
                    address:'',
                    cardNum:'',
                    cardFrontImg:'',
                    cardBackImg:'',
                    verifyStatus:'',
                    verifyUserId:'',    //审核
                    verifyDate:'',        //审核日期
                    verifyRemark:''    //
                },
                rules: {
                    name: [
                        {required: true, message: '请输入产品名', trigger: 'blur'}
                    ],
                    // price: [
                    //     {required: true, message: '请输入原价', trigger: 'blur'}
                    // ],
                    // discountPrice: [
                    //     {required: true, message: '请输入折后价', trigger: 'blur'}
                    // ],
                    // stock: [
                    //     {required: true, message: '请输入库存', trigger: 'blur'}
                    // ],
                    logo: [
                        {required: true, message: '请上传图片', trigger: 'blur'}
                    ]
                },
                ruleForm: {
                    name: '',
                    code: ''
                },
                multipleSelection: [],
                // -----------------product detail------------------//
                detailDialogFormVisible:false,
                entityForm2: {
                    id: '',
                    description: '',
                    detailImgs: '',
                    imgs: '',
                },
                rules2: {
                    description: [
                        {required: true, message: '请输入产品描述', trigger: 'blur'}
                    ],
                },
                detailImgs:[
                    // {name:"test",url:"http://img.taopic.com/uploads/allimg/140313/235026-1403130Z43831.jpg"},
                    // {name:"test",url:"http://pic71.nipic.com/file/20150707/11135325_162943209000_2.png"},
                ],
                imgs:[
                    // "http://img.taopic.com/uploads/allimg/140313/235026-1403130Z43831.jpg",
                    // "http://pic71.nipic.com/file/20150707/11135325_162943209000_2.png",
                ],
                dialogImageUrl: '',
                dialogVisible: false,
                showImgArr:[],
                showDialog: false,
                // -----------------product detail------------------//
                
            }
        },
        filters: {
            shopTypeFilter([id,data]) {
                for(let i in data){
                    if(data[i].id==id){
                        // console.log(data[i].name)
                        return data[i].name
                    }
                }
            }
        },
        created(){
            this.rid = localStorage.getItem('rid');
            this.school = JSON.parse(localStorage.getItem('school'));
        },
        mounted(){
            if(this.school){
                this.listQuery.param.schoolId = this.school.schoolId
            }
            this.getschoollist();
            // this.getshopTypelist();
            this.getData();
            this.editDialogFormVisible=false;
            this.detailDialogFormVisible=false;
            this.showDialog=false;
            $(".el-dialog--large").css(
                "top","0%"
            );
        },
        methods: {
            handleCurrentChange(val){
                this.listQuery.pageNumber = val
                this.getData();
            },
            handleSizeChange(val){
                this.listQuery.pageSize = val
                this.getData();
            },
            handleFilter(){
                this.listQuery.pageNumber = 1
                this.getData()
            },
            getschoollist(){
                let self = this;
                let _data = {
                    pageNumber: 1,
                    pageSize: 10000,
                }
                self.myajax("/school/list",_data,function(res){
                    console.log(res)
                    if(res.code==1000){
                        self.schoolOptions=res.data.list;
                    }
                });
            },
            getData(){
                let startTime = this.listQuery.param.startTime
                let endTime = this.listQuery.param.endTime
                if(startTime&&endTime){
                    // console.log(new Date(startTime))
                    // console.log(new Date(endTime))
                    this.listQuery.param.startTime = new Date(startTime)
                    this.listQuery.param.endTime = new Date(endTime)
                }
                this.myajax("/shopSecond/list",this.listQuery,(res)=>{
                    console.log(res)
                    this.tableData=res.data.list;
                    this.total=res.data.total;
                });
            },
            handleDetail(row,flag) {    //flag=1
                this.editFlag = flag
                this.detailDialogFormVisible = true
                this.detailForm = row

            },
            handleModify(row,flag){    //更新店铺 flag=2
                console.log(row)
                this.editFlag = flag
                this.detailDialogFormVisible = true
                this.detailForm = row
            },
            comfirmModify(){
                let data={
                    id: this.detailForm.id,
                    shopName: '汤姆爸爸的小店',
                    // phone: this.detailForm.phone,
                    // status: this.detailForm.status
                    status: 0
                }
                this.myajax("/shopSecond/update",data,(res)=>{
                    console.log(res)
                    if(res.code==1000){
                        this.detailDialogFormVisible = false
                        this.getData()
                    }
                });
            },
            handleClose(row){     //关店
                let status
                if(row.status==0){
                    status = 1
                }else{
                    status = 0
                }
                let data = {
                    id: row.id,
                    status: status
                }
                this.myajax("/shopSecond/setAble",data,(res)=>{
                    console.log(res)
                    if(res.code==1000){
                        this.getData()
                    }
                });
            },
            handleDelete(row) {
                var self=this;
                // var ids = new Array();
                // if (id) {
                //     ids.push(id);
                // }else{
                //     if(self.multipleSelection.length==0){
                //         self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                //         return;
                //     }
                //     for(var k in this.multipleSelection){
                //         ids.push(this.multipleSelection[k].id);
                //     }
                // }
                self.$confirm('确定要删除该店铺吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={id:row.id}; 
                    // self.myajax("/product/delete",data,function(data){
                    self.myajax("/shopSecond/deleteById",data,function(data){
                        var code=data.code;
                        if(code==1000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            handleAddShop() {
                let self = this;
                self.dailogTitle = '添加产品';
                // self.entityForm = {};
                self.entityForm.id = "";
                self.entityForm.name = "";
                self.entityForm.price = "";
                self.entityForm.discountPrice = "";
                self.entityForm.stock = "";
                $("#logo").html("");
                self.editDialogFormVisible = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            setValue1(value){
                this.entityForm.logo="";
                if(value){
                    this.entityForm.logo=value;
                }
            },
            formatterCreateDate(row,column){
                var date = row.createDate;  
                if (date == undefined) {  
                    return "";  
                } 
                return new Date(date).format("yyyy-MM-dd hh:mm");
            },
            setValue1(value){
                this.entityForm.logo="";
                if(value){
                    this.entityForm.logo=value;
                }
            },
            // -----------------product detail------------------//
            productDetail($index,row){
                if (row.id) {
                    let self = this;
                    self.entityForm = row;
                    //console.log(row.id);
                    self.editDialogFormVisible=true;
                    
                }else{
                    ;
                }
            },
            setStatus(status,id){//冻结解冻用户
                var self=this;
                self.entityForm.verifyStatus=status
                //console.log(self.entityForm)
                self.myajax("/apply/setstatus",self.entityForm,function(data){
                    //console.log(data);
                    self.editDialogFormVisible=false;
                });
            },
            update(id){//冻结解冻用户
                var self=this;
                //console.log(self.entityForm)
                self.myajax("/apply/setstatus",self.entityForm,function(data){
                    //console.log(data)
                    self.dialogVisible=false;
                });
            },
            getUrlArr(urls,arr){    //根据拼接的url往图片墙数组中添加数据
                if (urls ) {
                    var strArr = urls.split(',');
                    for(var i in strArr){
                        var obj = { name:new Date().getTime().toString(), url:strArr[i] };
                        arr.push(obj);
                    }
                }
            },
            handleSuccess(response, file, fileList){
                let self = this;
                self.entityForm2.detailImgs = self.getStringUrl(fileList);
            },
            handleRemove(file, fileList) {
                let self = this;
                self.entityForm2.detailImgs = self.getStringUrl(fileList);
            },
            handlePictureCardPreview(file) {
                //console.log("file");
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess2(response, file, fileList){
                let self = this;
                self.entityForm2.imgs = self.getStringUrl(fileList);
            },
            handleRemove2(file, fileList) {
                let self = this;
                self.entityForm2.imgs = self.getStringUrl(fileList);
            },
            handlePictureCardPreview2(file) {
                //console.log("file");
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            showDetailImgs(){
                let self = this;
                var imgArr = self.entityForm2.detailImgs.split(',');

                self.showImgArr.length = 0;
                for(var i in imgArr){
                    self.showImgArr.push(imgArr[i]);
                }
                self.showDialog = true;
            }
            // -----------------product detail------------------//
        }
    }
</script>

<style scoped>
   .left{
       float: left;
       padding-right:30px;
   }
   .filter-item{
    margin-bottom: 20px;
   }
    .input_edit{
        width: 200px;
        height: 72px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    span {
        white-space:normal;
    }
    img{
        max-width: 100%;
    }
    .imgs{
        width:200px;
        height:260px;
        float: left;
    }
</style>
